<template>
    <el-tooltip class="box-item" effect="dark" :content="status ? '收缩' : '展开'" placement="top-start">
        <el-icon size="34px" @click="setCollapse">
            <component :is="status ? 'Fold' : 'Expand'"></component>
        </el-icon>
    </el-tooltip>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { useMenuStore } from '@/store/menu/index.js'

const store = useMenuStore()

const status = computed(() => {
    return store.getCollapse
})

const setCollapse = () => {
    store.setCollapse()
}

</script>

<style lang="scss" scoped>
.el-icon {
    cursor: pointer;
    margin-right: 10px;
}
</style>